<template>
    <div class="flex flex-wrap gap-4">
      <div class="table-container">
        <el-card class="table-card" shadow="always">
          <el-table :data="pageInfo.list" border style="width: 100%">
            <el-table-column fixed prop="bid" label="书籍ID" width="100" />
            <el-table-column prop="bavatar" label="书籍图像" width="100">
              <template #default="scope">
                <el-avatar shape="square" :size="50" :src="'http://localhost:8080/upload/' + scope.row.bavatar" />
              </template>
            </el-table-column>
            <el-table-column prop="bname" label="书名" width="180" />
            <el-table-column prop="bauthor" label="作者" width="100" />
            <el-table-column prop="bpress" label="出版社" width="140" />
            <el-table-column prop="bdate" label="出版日期" width="110" />
            <el-table-column prop="bnumber" label="书籍数量" width="100" />
            <el-table-column prop="cid" label="分类ID" width="100" />
            <el-table-column fixed="right" label="操作" width="100">
              <template #default="scope">
                <el-button size="small" type="success" @click="showAdmin(scope.row.bid)">
                  <el-icon>
                    <Edit />
                  </el-icon>分配
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row class="row-bg" justify="center">
            <el-pagination style="margin-top: 20px;" background layout="prev, pager, next"
              v-model:current-page="pageInfo.pageNum" :page-count="pageInfo.pages" @update:current-page="selectByPage" />
          </el-row>
        </el-card>
      </div>
    </div>
    
    <div class="table-container">
      <el-drawer v-model="table" title="书架" direction="rtl" size="40%" class="drawer-style">
        <el-table :data="bookList">
          <el-table-column property="bname" label="书名" width="150" />
          <el-table-column property="bauthor" label="作者" width="200" />
          <el-table-column property="bpress" label="出版社" />
        </el-table>
      </el-drawer>
    </div>
    
    <div class="table-container">
      <el-card class="table-card" shadow="always">
        <el-table :data="classifyList" stripe>
          <el-table-column prop="cid" label="ID" width="180" />
          <el-table-column prop="cname" label="分类名称" width="180" />
          <el-table-column prop="bookCount" label="书籍数量" />
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button class="action-button" size="small" type="primary" @click="selectBuBid(scope.row.cid)">
                <el-icon>
                  <Open />
                </el-icon>打开
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    
    <!-- 分配用户对话框开始 -->
    <el-dialog v-model="adminShow" title="添加书籍" width="500" class="add-book-dialog" :close-on-click-modal="false">
      <el-transfer v-model="selectdAids" :data="allAdmin" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="adminShow = false;">取消</el-button>
          <el-button type="primary" @click="insertBidAndAid">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!--分配用户的对话框结束-->
  </template>
  
  <script setup>
  import { reactive, ref } from 'vue';
  import { ElDrawer, ElMessage, ElMessageBox } from 'element-plus';
  import bookApi from '@/api/bookApi';
  import { Delete } from '@element-plus/icons-vue';
  
  // 表格加载开启
  const loading = ref(true);
  
  //存放所有书籍数组
  const allBook = ref([]);
  
  // 保存分页信息
  const pageInfo = ref({
    pages: 0,
    pageSize: 0,
    pageNum: 0
  });
  
  //用来搜索书名关键字
  const bname = ref('');
  
  const bauthor = ref('');
  
  // 分页查询
  function selectByPage(pageNum) {
    // 表格加载关闭
    loading.value = false;
    bookApi.selectByPage(pageNum, bname.value, bauthor.value).then(resp => {
      pageInfo.value = resp.data;
    });
  }
  
  //分配用户
  function insertBidAndAid() {
    bookApi.insertBidAndAid(selectdBid.value, selectdAids.value).then(resp => {
      //弹出消息
      ElMessage.success(resp.msg);
      //隐藏穿梭框
      adminShow.value = false;
      // 刷新表格
      selectByPage(1);
    });
  }
  
  // 获取所有分类信息
  const classifyList = ref([]);
  
  // 获取所有书籍信息
  const bookList = ref([]);
  
  // 显示抽屉框
  const table = ref(false);
  
  //显示穿梭框
  const adminShow = ref(false);
  
  //数据源
  const allAdmin = ref([]);
  
  //被选中的
  const selectdAids = ref([]);
  
  //需要分配用户的书籍ID
  const selectdBid = ref(0);
  
  //查询所有用户并显示分配用户的对话框
  function showAdmin(bid) {
    bookApi.allAdmin(bid).then(resp => {
      allAdmin.value = resp.data.allAdmin;
      selectdAids.value = resp.data.selectdAids;
      selectdBid.value = bid;
      adminShow.value = true;
    });
  }
  
  // 定义方法获取所有分类的信息
  function selectAll() {
    bookApi.selectBidAndCid().then(resp => {
      classifyList.value = resp.data.map(item => ({
        cid: item.cid,
        cname: item.cname,
        bookCount: item.bookCount
      }));
    });
  }
  
  // 定义方法根据 id 查询书籍
  function selectBuBid(cid) {
    bookApi.selectByCid(cid).then(resp => {
      bookList.value = resp.data;
    });
    table.value = true;
  }
  
  // 默认查询第一页
  selectByPage(1);
  
  // 执行查询所有
  selectAll();
  </script>
  
  <style scoped>
  .table-card {
    border: 1px solid #d3d3d3;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
  }
  
  .action-button {
    background-color: #409EFF;
    color: white;
    border: none;
  }
  
  .action-button:hover {
    background-color: #66b1ff;
  }
  
  .drawer-style {
    border: 1px solid #d3d3d3;
    border-radius: 5px;
    background-color: #f0f0f0;
  }
  
  .el-table {
    background-color: #fff;
  }
  
  .el-table th {
    background-color: #e0e0e0;
    color: #333;
  }
  
  .table-container {
    display: flex;
    justify-content: center;
  }
  
  .el-card {
    width: 80%;
    margin: 0 auto;
  }
  
  /* 调整表格列宽度以更好地适应内容 */
  .el-table.el-table__column {
    word-wrap: break-word;
    white-space: normal;
  }
  
  .el-table-column:nth-child(1) {
    width: 100px;
  }
  
  .el-table-column:nth-child(2) {
    width: 180px;
  }
  
  .el-table-column:nth-child(3) {
    width: 120px;
  }
  
  .el-table-column:nth-child(4) {
    width: 200px;
  }
  </style>